function load_charts() {
  //var  gczj_y_data= ["DN75", "DN32", "DN300", "DN250", "DN70", "DN20", "DN600", "DN500", "DN1800", "DN1400", "DN1200", "DN25"];
  //var  gczj_x_data= [64162, 88871, 101454, 164377, 198705, 221259, 276068, 297882, 518360, 529164, 755710, 803960];

  //var  fmkj_y_data=  ["DN150", "DN110", "DN100", "DN90", "DN80", "DN63", "DN60", "DN50", "DN40", "DN32", "DN25", "DN20" ];
  //var fmkj_x_data = [198, 422, 710, 836, 1210, 1337, 2532, 2989, 3910, 6259, 8128, 10279];

  //var jld_y_data = ['用户水表', '接水点', '流量计', '大用户', '消防表'];
  //var jld_x_data = [127977, 27801, 185, 107, 1];

  //var gwcz_y_data = ['有缝钢塑', '镀锌', 'PE', '未知', '铸铁'];
  //var gwcz_x_data = [55994, 157388, 194991, 220262, 579621];

  var gczj_y_data = []
  var gczj_x_data = []

  var fmkj_y_data = []
  var fmkj_x_data = []

  var jld_y_data = []
  var jld_x_data = []

  var gwcz_y_data = []
  var gwcz_x_data = []

  var sz_xfs = 0
  var xq_xfs = 0
  var qt_xfs = 0
  var zs_xfs = sz_xfs + xq_xfs + qt_xfs

  var GWCD = 0
  var FMGS = 0

  let town_big = town
  if (town == '中环内') {
    town_big = '昆山市'
  }
  if (localStorage.getItem('is_nw')) {
    town_big = 'NongWu'
  }
  var sqltxt = `select * from SYS_BIGDATA_INFO t where ssqy='${town_big}'  order by  to_number(t.value) desc`
  var key = '8xz/C5nX6J80rQkgeUTFVV2N+p/dNklLfgLG18BRp2tfCMna7xBKcg=='
  $.ajax({
    type: 'post',
    url: 'DataInfo.svc/QueryTableBySQL',
    cache: false,
    async: false,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: '{"sqlText":"' + sqltxt + '","key":"' + key + '"}',
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert(XMLHttpRequest.status)
    },
    success: function (data) {
      var myJSONobj = []
      if (data.d.length != 0) {
        myJSONobj = eval(data.d)
      }
      for (var i = 0; i < myJSONobj.length; i++) {
        if (
          myJSONobj[i].LAYERNAME == '雨水管' &&
          myJSONobj[i].FIELDNAME == 'DMCC'
        ) {
          var value = parseFloat(myJSONobj[i].VALUE)

          if (gczj_y_data.length > 14) continue
          gczj_y_data.push(myJSONobj[i].FIELDVALUE)
          gczj_x_data.push((value / 1000).toFixed(2))
        }
        if (
          myJSONobj[i].LAYERNAME == '污水管' &&
          myJSONobj[i].FIELDNAME == 'DMCC'
        ) {
          var value = parseFloat(myJSONobj[i].VALUE)

          if (fmkj_y_data.length > 14) continue
          fmkj_y_data.push(myJSONobj[i].FIELDVALUE)
          fmkj_x_data.push((value / 1000).toFixed(2))
        }
        if (
          myJSONobj[i].LAYERNAME == '污水管' &&
          myJSONobj[i].FIELDNAME == 'Material'
        ) {
          var value = parseFloat(myJSONobj[i].VALUE)
          FMGS = FMGS + value
          if (jld_y_data.length > 7) continue
          jld_y_data.push(myJSONobj[i].FIELDVALUE)
          jld_x_data.push((value / 1000).toFixed(2))
        }
        if (
          myJSONobj[i].LAYERNAME == '雨水管' &&
          myJSONobj[i].FIELDNAME == 'Material'
        ) {
          var value = parseFloat(myJSONobj[i].VALUE)
          GWCD = GWCD + value
          if (gwcz_y_data.length > 7) continue
          gwcz_y_data.push(myJSONobj[i].FIELDVALUE)
          gwcz_x_data.push((value / 1000).toFixed(2))
        }
        if (
          myJSONobj[i].LAYERNAME == '检查井' ||
          myJSONobj[i].LAYERNAME == '排放口' ||
          myJSONobj[i].LAYERNAME == '进水口'
        ) {
          var value = parseFloat(myJSONobj[i].VALUE)
          if (myJSONobj[i].LAYERNAME == '检查井') {
            sz_xfs = sz_xfs + parseFloat(value)
          }
          if (myJSONobj[i].LAYERNAME == '进水口') {
            xq_xfs = xq_xfs + parseFloat(value)
          }
          if (myJSONobj[i].LAYERNAME == '排放口') {
            qt_xfs = qt_xfs + parseFloat(value)
          }
        }
      }
      zs_xfs = sz_xfs + xq_xfs + qt_xfs
    },
  })
  // 雨水管网与污水管网长度
  document.getElementById('gwzc_p').innerHTML = (GWCD / 1000).toFixed(2)
  document.getElementById('fmzs_p').innerHTML = (FMGS / 1000).toFixed(2)
  var gczj_y_data_ = []
  var gczj_x_data_ = []
  for (var i = gczj_y_data.length - 1; i >= 0; i--) {
    gczj_y_data_.push(gczj_y_data[i])
    gczj_x_data_.push(gczj_x_data[i])
  }
  gczj_y_data = gczj_y_data_
  gczj_x_data = gczj_x_data_

  var fmkj_y_data_ = []
  var fmkj_x_data_ = []
  for (var i = fmkj_y_data.length - 1; i >= 0; i--) {
    fmkj_y_data_.push(fmkj_y_data[i])
    fmkj_x_data_.push(fmkj_x_data[i])
  }
  fmkj_y_data = fmkj_y_data_
  fmkj_x_data = fmkj_x_data_

  var jld_y_data_ = []
  var jld_x_data_ = []
  for (var i = jld_y_data.length - 1; i >= 0; i--) {
    jld_y_data_.push(jld_y_data[i])
    jld_x_data_.push(jld_x_data[i])
  }
  jld_y_data = jld_y_data_
  jld_x_data = jld_x_data_
  //管网统计
  var gczj_chart = echarts.init(document.getElementById('div_dsj_gczj_chart'))
  var gczj_chart_option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0,
        },
      },
      formatter: function (prams) {
        return (
          '规格：' +
          prams[0].data +
          '千米(' +
          ((parseFloat(prams[0].data) / (GWCD / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    grid: {
      top: '2%',
      bottom: '10%',
      right: '14%',
      left: '2%',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        gridIndex: 0,

        data: gczj_y_data,
        axisLabel: {
          show: true,
          color: '#fff',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
      },
    ],
    xAxis: [
      {
        type: 'value',
        gridIndex: 0,

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisLabel: {
          show: false,
          color: 'rgb(170,170,170)',
          fontSize: 16,
        },
      },
    ],
    series: [
      {
        name: '规格',
        type: 'bar',
        barWidth: '15',
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#97deff' },
              { offset: 1, color: '#0240ff' },
            ]),
          },
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            color: '#fff',
            //font-family: "NumFont";
          },
        },
        data: gczj_x_data,
        zlevel: 11,
      },
    ],
  }
  gczj_chart.setOption(gczj_chart_option)

  //阀门统计
  var fmkj_chart = echarts.init(document.getElementById('div_dsj_fmkj_chart'))
  var fmkj_chart_option = {
    title: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      textStyle: {
        color: '#f0c429',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0,
        },
      },
      formatter: function (prams) {
        return (
          '规格：' +
          prams[0].data +
          '千米(' +
          ((parseFloat(prams[0].data) / (FMGS / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    grid: {
      top: '2%',
      bottom: '10%',
      left: '14%',
      right: '2%',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        gridIndex: 0,

        data: fmkj_y_data,
        color: 'rgba(255,255,255,1)',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,

          color: '#fff',
        },
      },
      {
        type: 'category',
        gridIndex: 0,

        data: fmkj_y_data,
        color: 'rgba(255,255,255,1)',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,

          color: '#fff',
        },
      },
    ],
    xAxis: [
      {
        inverse: true,
        type: 'value',
        gridIndex: 0,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0c3b71',
          },
        },
        axisLabel: {
          show: false,
          color: 'rgb(170,170,170)',

          fontSize: 16,
        },
      },
    ],
    series: [
      {
        name: '规格',
        type: 'bar',
        barWidth: '15',
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#ff6e02' },
              { offset: 1, color: '#ffffcd' },
            ]),
          },
        },
        label: {
          normal: {
            show: true,
            position: 'left',
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
        },
        data: fmkj_x_data,
        zlevel: 11,
      },
    ],
  }

  fmkj_chart.setOption(fmkj_chart_option)

  //计量点
  var myChart_JLD = echarts.init(document.getElementById('div_dsj_bottom_1'))
  var option_JLD = {
    //color: ['#e54035', '#0aacff', '#0ab120', '#e50ee6', '#e6cf1e'],
    title: {
      show: false,
      top: '5%',
      left: 'center',
      text: '计量点类型',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 24,
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '20%',
      top: '60px',
      padding: '0 0 10 0',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return (
          params[0].name +
          ': ' +
          params[0].value +
          '千米(' +
          ((parseFloat(params[0].value) / (GWCD / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    xAxis: [
      {
        type: 'category',
        data: jld_y_data,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)',
          },
        },
        axisLabel: {
          margin: 10,
          color: '#e2e9ff',
          textStyle: {
            fontSize: 14,
          },
        },
      },
    ],
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        data: jld_x_data,
        barWidth: '20px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0,244,255,1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,77,167,1)', // 100% 处的颜色
                },
              ],
              false
            ),
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: 'rgba(0,160,221,1)',
            shadowBlur: 4,
          },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            width: 80,
            height: 30,
            backgroundColor: 'rgba(0,160,221,0.1)',
            borderRadius: 200,
            position: ['-8', '-60'],
            distance: 1,
            formatter: ['    {d|●}', ' {a|{c}}     \n', '    {b|}'].join(','),
            rich: {
              d: {
                color: '#3CDDCF',
              },
              a: {
                color: '#fff',
                align: 'center',
              },
              b: {
                width: 1,
                height: 30,
                borderWidth: 1,
                borderColor: '#234e6c',
                align: 'left',
              },
            },
          },
        },
      },
    ],
  }

  myChart_JLD.setOption(option_JLD)

  //管网材质
  var myChart_GWCZ = echarts.init(document.getElementById('div_dsj_bottom_3'))
  var option3_2 = {
    //color: ['#e54035', '#0aacff', '#0ab120', '#e50ee6', '#e6cf1e'],
    title: {
      show: false,
      top: '5%',
      left: 'center',
      text: '计量点类型',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 24,
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '20%',
      top: '60px',
      padding: '0 0 10 0',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return (
          params[0].name +
          ': ' +
          params[0].value +
          '千米(' +
          ((parseFloat(params[0].value) / (FMGS / 1000)) * 100).toFixed(2) +
          '%)'
        )
      },
    },
    xAxis: [
      {
        type: 'category',
        data: gwcz_y_data,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)',
          },
        },
        axisLabel: {
          margin: 10,
          color: '#e2e9ff',
          textStyle: {
            fontSize: 14,
          },
        },
      },
    ],
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        data: gwcz_x_data,
        barWidth: '20px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0,244,255,1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,77,167,1)', // 100% 处的颜色
                },
              ],
              false
            ),
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: 'rgba(0,160,221,1)',
            shadowBlur: 4,
          },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            width: 80,
            height: 30,
            backgroundColor: 'rgba(0,160,221,0.1)',
            borderRadius: 200,
            position: ['-8', '-60'],
            distance: 1,
            formatter: ['    {d|●}', ' {a|{c}}     \n', '    {b|}'].join(','),
            rich: {
              d: {
                color: '#3CDDCF',
              },
              a: {
                color: '#fff',
                align: 'center',
              },
              b: {
                width: 1,
                height: 30,
                borderWidth: 1,
                borderColor: '#234e6c',
                align: 'left',
              },
            },
          },
        },
      },
    ],
  }
  myChart_GWCZ.setOption(option3_2)

  //消防栓
  var myChart_XFS = echarts.init(document.getElementById('div_dsj_bottom_2'))

  var dataStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 0,
      shadowColor: '#203665',
    },
  }
  var option_xsh = {
    //backgroundColor: "#20263f",

    title: {
      show: false,
      top: '5%',
      left: 'center',
      text: '消防栓类型',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 24,
      },
    },
    series: [
      {
        name: '排放口',
        type: 'pie',
        clockWise: false,
        radius: [55, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['85%', '60%'],
        data: [
          {
            value: qt_xfs,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#F3CCFF',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16,
                  },
                },
                formatter: function (params) {
                  return '{a|' + params.value + '}\n\n' + '{b|排放口}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              normal: {
                color: '#F3CCFF',
                shadowColor: '#F3CCFF',
                shadowBlur: 0,
              },
            },
          },
          {
            value: zs_xfs - qt_xfs,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#0D3166',
              },
              emphasis: {
                color: '#0D3166',
              },
            },
          },
        ],
      },
      {
        name: '检查井',
        type: 'pie',
        clockWise: false,
        radius: [55, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['50%', '60%'],
        data: [
          {
            value: sz_xfs,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#FFFF70',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16,
                  },
                },
                formatter: function (params) {
                  return '{a|' + params.value + '}\n\n' + '{b|检查井}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              normal: {
                color: '#FFFF70',
                shadowColor: '#7FFCCE',
                shadowBlur: 0,
              },
            },
          },
          {
            value: zs_xfs - sz_xfs,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#0D3166',
              },
              emphasis: {
                color: '#0D3166',
              },
            },
          },
        ],
      },
      {
        name: '进水口',
        type: 'pie',
        clockWise: false,
        radius: [55, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['15%', '60%'],
        data: [
          {
            value: xq_xfs + 20000,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#7FFCCE',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16,
                  },
                },
                formatter: function (params) {
                  return '{a|' + (params.value - 20000) + '}\n\n' + '{b|进水口}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              normal: {
                color: '#7FFCCE',
                shadowColor: '#7FFCCE',
                shadowBlur: 0,
              },
            },
          },
          {
            value: zs_xfs - sz_xfs,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#0D3166',
              },
              emphasis: {
                color: '#0D3166',
              },
            },
          },
        ],
      },
    ],
  }
  myChart_XFS.setOption(option_xsh)
}
